<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit Page</title>
`    <script src="js/lib/vue.min.js"></script>
    <script src="js/lib/axios.min.js"></script>
</head>
<body>

<div id="app">

    <p><button type="button" @click="goToViewPage">go to view page</button></h2></p>

    <p>file name :</p>
    <h2>{{fileName}}</h2></p>

    <p>file content :</p>
    <textarea v-model="fileContent" placeholder="please input file content..." rows="5" cols="34"></textarea><br/>

    <button type="button" @click="update">Save</button>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            fileId: 1,
            fileName: '',
            fileContent: ''
        },
        methods: {
            update: function () {
                // 调用更新文件接口
                axios.post('/api/file/update',
                        {
                            "fileId": this.fileId,
                            "fileName": this.fileName,
                            "fileContent": this.fileContent
                        }
                ).then(response => {
                    // 更新结果
                    var data = response.data.data;
                    if (data.result) {
                        alert("更新成功！ 文件被我锁住了!  TTL:["+ data.ttl +"] Holder:["+ data.holder +"]")
                    } else {
                        alert("无法更新！ 文件被别人锁住了!  TTL:["+ data.ttl +"] Holder:["+ data.holder +"]")
                    }
                }).catch(error => {
                     alert(error);
                });
            },
            goToViewPage: function () {
                window.location.href='view.html';
            }
        },
        mounted () {
            //获取url中"?"符后的字串 ('?modFlag=business&role=1')
            var url = location.search;
            var theRequest = new Object();
            if ( url.indexOf( "?" ) != -1 ) {
                //substr()方法返回从参数值开始到结束的字符串；
                var str = url.substr( 1 );
                var strs = str.split( "&" );
                for ( var i = 0; i < strs.length; i++ ) {
                    theRequest[ strs[ i ].split( "=" )[ 0 ] ] = ( strs[ i ].split( "=" )[ 1 ] );
                }
                //此时的theRequest就是我们需要的参数；

                // 把传过来的fileId设置到本页面的数据模型中
                this.fileId = theRequest.fileId;
            }

            // 获取文件相关信息并渲染
            axios.get('/api/file/get/'+ this.fileId )
            .then(response => {
                var data = response.data.data;
                this.fileName = data.fileName;
                this.fileContent = data.fileContent;
            })
            .catch(error => {
                alert(error);
            });

            // 尝试获取文件锁
            axios.get('/api/file/tryLock/' + this.fileId)
            .then(response => {
                var data = response.data.data;
                if (data.result) {
                    alert("文件被我锁住了！ TTL:[" + data.ttl + "]   Holder:["+ data.holder + "]" )
                }else {
                    alert("文件已经被别人锁住了！ TTL:[" + data.ttl + "]  Holder:["+ data.holder + "]" )
                }
            }).catch(error => {
                alert(error);
            });

        }
    })
</script>

</body>
</html>

